<template>
    <div class="login">
      <div class="login-box">
        <img src="@/assets/login/login-l.png" alt="" />
        <div class="login-form">
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
            <div class="login-form-title">
              <img
                src="@/assets/login/icon_logo.png"
                style="width: 250px; height: 100px"
                alt=""
              />
             
            </div>
            <el-form-item prop="sno">
              <el-input
                v-model="loginForm.sno"
                type="text"
                auto-complete="off"
                placeholder="学号"
                prefix-icon="iconfont icon-user"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="密码"
                prefix-icon="iconfont icon-lock"
                @keyup.enter.native="handlLogin"
              />
            </el-form-item>
            <el-form-item style="width: 100%">
              <el-button
                :loading="loading"
                class="login-btn"
                size="medium"
                type="primary"
                style="width: 100%"
                @click.native.prevent="handlLogin"
              >
                <span v-if="!loading">登录</span>
                <span v-else>登录中...</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue, Watch } from 'vue-property-decorator'
  import { Route } from 'vue-router'
  import { Form as ElForm, Input } from 'element-ui'
  import { UserModule } from '@/store/modules/user'
  
  @Component({
    name: 'StudentLogin',
  })
  export default class extends Vue {
    private validateSno = (rule: any, value: string, callback: Function) => {
      if (!value) {
        callback(new Error('请输入学号'))
      } else {
        callback()
      }
    }
    private validatePassword = (rule: any, value: string, callback: Function) => {
      if (value.length < 6) {
        callback(new Error('密码必须在6位以上'))
      } else {
        callback()
      }
    }
    private loginForm = {
      sno: '',
      password: '',
    } as {
      sno: string
      password: string
    }
  
    loginRules = {
      sno: [{ validator: this.validateSno, trigger: 'blur' }],
      password: [{ validator: this.validatePassword, trigger: 'blur' }],
    }
    private loading = false
    private redirect?: string
  
    @Watch('$route', { immediate: true })
    private onRouteChange(route: Route) {}
  
    // 登录
    private handlLogin() {
    (this.$refs.loginForm as ElForm).validate(async (valid: boolean) => {
      if (valid) {
        this.loading = true
        await UserModule.StudentLogin({
          sno: this.loginForm.sno,
          password: this.loginForm.password
        })
          .then((res: any) => {
            if (String(res.code) === '1') {
              // 登录成功，跳转到学生端首页
              this.$router.push('/user/role')
            } else {
              this.$message.error(res.msg)
              this.loading = false
            }
          })
          .catch((error) => {
            this.$message.error(error.message || '登录失败')
            this.loading = false
          })
      }
    })
  }
  }
  </script>
  
  <style lang="scss">
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    // background: #476dbe;
    background-color: #333;
  }
  
  .login-box {
    width: 1000px;
    height: 474.38px;
    border-radius: 8px;
    display: flex;
    img {
      width: 60%;
      height: auto;
    }
  }
  
  .title {
    margin: 0px auto 10px auto;
    text-align: left;
    color: #707070;
  }
  
  .login-form {
    background: #ffffff;
    width: 40%;
    border-radius: 0px 8px 8px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-form {
      width: 214px;
      height: 307px;
    }
    .el-form-item {
      margin-bottom: 30px;
    }
    .el-form-item.is-error .el-input__inner {
      border: 0 !important;
      border-bottom: 1px solid #fd7065 !important;
      background: #fff !important;
    }
    .input-icon {
      height: 32px;
      width: 18px;
      margin-left: -2px;
    }
    .el-input__inner {
      border: 0;
      border-bottom: 1px solid #e9e9e8;
      border-radius: 0;
      font-size: 12px;
      font-weight: 400;
      color: #333333;
      height: 32px;
      line-height: 32px;
    }
    .el-input__prefix {
      left: 0;
    }
    .el-input--prefix .el-input__inner {
      padding-left: 26px;
    }
    .el-input__inner::placeholder {
      color: #aeb5c4;
    }
    .el-form-item--medium .el-form-item__content {
      line-height: 32px;
    }
    .el-input--medium .el-input__icon {
      line-height: 32px;
    }
  }
  
  .login-btn {
    border-radius: 17px;
    padding: 11px 20px !important;
    margin-top: 10px;
    font-weight: 500;
    font-size: 12px;
    border: 0;
    font-weight: 500;
    color: #333333;
    // background: #09a57a;
    background-color: #4facfe;
    &:hover,
    &:focus {
      // background: #09a57a;
      background-color: #282ca7;
      color: #ffffff;
    }
  }
  .login-form-title {
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    .title-label {
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      margin-left: 10px;
    }
  }
  </style>
  